<template>
  <div class="chat-page">
    <chat-window :messages="messages" @send-message="handleSendMessage" />
  </div>
</template>

<script>
import ChatWindow from "./window/chatWindow.vue";

export default {
  components: {
    ChatWindow,
  },
  data() {
    return {
      messages: [], // 存储聊天消息
    };
  },
  methods: {
   
    handleSendMessage(message) {
      // 发送用户消息
      this.messages.push({ type: "user", content: message });

      // 调用后端 API 获取 RagFlow 的回复
      this.getRagFlowResponse(message);
    },
    async getRagFlowResponse(message) {
      try {
        const response = await this.$axios.post("/api/chat", {
          question: message,
        });

        // 模拟流式响应（逐步显示）
        const streamResponse = response.data; // 假设后端返回流式数据
        this.messages.push({ type: "system", content: "" });

        for (const chunk of streamResponse) {
          this.messages[this.messages.length - 1].content += chunk;
        }
      } catch (error) {
        console.error("Error fetching response:", error);
      }
    },
  },
};
</script>

<style scoped>
.chat-page {
  max-width: 100%;
  margin: 0 auto;
  /* padding: 20px; */
}
</style>
